<template>
  <div class="password-box">
    <div class="password-title">密码为8-16位，须包含数字、字母、符号中至少2种元素</div>
    <div class="title-div">请输入旧密码</div>
    <div class="used-box">
      <input type="text" v-model="oldpass" placeholder="旧密码" />
      <span style="color:#2F54EB" @click="$router.push('/setPwdSpeed_1')">忘记密码？</span>
    </div>
    <div class="title-div">请输入新密码</div>
    <div>
      <input type="password" v-model="newpass" placeholder="新密码" />
    </div>
    <div class="title-div">确认密码</div>
    <div>
      <input type="password" v-model="newpass1" placeholder="再次输入" />
    </div>
    <div>
      <button @click="changePassword">立即修改</button>
    </div>
  </div>
</template>

<script>
import { updatePassword ,updatePassWithOutUser} from "api/User";
export default {
  data() {
    return {
      oldpass: "",
      newpass: "",
      newpass1: "",
    };
  },
  mounted() {},
  methods: {
    changePassword() {
      debugger
      let { oldpass, newpass, newpass1 } = this;

      if (!newpass || !newpass1) {
        this.$toast("新密码不能为空！");
        return false;
      }

      if (!oldpass) {
        this.$toast("旧密码不能为空！");
        return false;
      }

      if (newpass == newpass1) {
        updatePassword(oldpass, newpass).then(({ message, code }) => {
          if (!code) {
            this.$toast("密码修改成功！请重新登录");
            localStorage.removeItem("token");
            localStorage.removeItem("isLogin");
            localStorage.removeItem("openId");
            localStorage.removeItem("userInfo");

            setTimeout(() => window.location.href= window.location.protocol + "//" + window.location.hostname + "/h5/#/login", 500);
          }
        });
      } else {
        this.$toast("新密码不一致");
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
@import './../../assets/styl/mixin.styl'
.password-box
  padding rem(16) rem(15)
  .password-title
    font-size rem(12)
    color #999999
  .title-div
    margin-top rem(20)
    margin-bottom rem(8)
    color #666666
  div
    input
      border rem(1) solid #CCCCCC
      height rem(40)
      width rem(345)
      border-radius rem(5)
      color #333333
      padding-left rem(10)
      box-sizing border-box
    button
      border-radius rem(5)
      margin-top rem(54)
      width rem(345)
      height rem(49)
      background $baseColor
      color $infoColor
  .used-box
    position relative
    input
      padding-right rem(75)
    span
      position absolute
      right rem(5)
      top 40%
</style>